<template>
    <div>
        <div  @click="handleClick(item)" class="title" v-for="(item,index) in list" :key="index">
            <span class="left"> <img :src="item.img" width="140px" alt="房源图片" class="image" /></span>
            <span class="right">
                <div class="one">{{item.name}}</div>
                <div class="onee">{{item.soll}}</div>
                <div class="oneee">{{item.ditie}}</div>
                <div class="oneeee">{{item.price}}</div>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    
    data(){
        return{
            list:[
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
                {img:'https://img1.baidu.com/it/u=1350314845,578254029&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426',name:'东京练马区',soll:'三室/1/东/野比家大院',ditie:'近地铁',price:'0元/月'},
            ]
        }
    },
    methods:{
        handleClick(item){
            this.$router.push({
                path:'/detail',
                query:{
                    name: item.name,
                    soll: item.soll,
                    ditie: item.ditie,
                    price: item.price
                }
            })
        }
    }
}
</script>
<style>
    .title{
        margin-bottom: 30px;
        margin-top: 30px;
        display: flex;
        height: 150px;
        border-bottom: 1px solid #ccc;

    }
    .left{
         width: 130px;
         height: 100px;
         padding: 10px;
         margin-right: 10px;
    }
    .right{
        text-align: start;
    }
    .one{
         font-size: 20px;
         font-weight: bold;
         margin-bottom: 10px;
    }
    .onee{
         font-size: 12px;
         margin-bottom: 10px;
    }
    .oneee{
         font-size: 12px;
         margin-bottom: 10px;
         background-color: orange;
         color: white;
         text-align: center;
         width: 50px;
         height: 15px;
         padding: 3px;
    }
    .oneeee{
         font-size: 20px;
         font-weight: bold;
         color: red;
    }
</style>